// 个人中心scss

@import "Reset.scss";
@import "./Common\ Styles.scss";

@function Ant_Group($w) {
  @return ($w / 1451) * 100 + vw;
}
@function font($w) {
  @return ($w / 1451) * 100 + vmin;
}
// 页面最大的盒子
.wrap {
  .box {
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: -1;
    background: url(https://gw.alipayobjects.com/mdn/rms_02c092/afts/img/A*jiwwQbk9PoQAAAAAAAAAAAAAARQnAQ)
      center center / cover no-repeat;
  }
//   中间主体部分
  .main {
    display: flex;
    flex-direction: column;
    align-items: center;
    .img_big {
      width: Ant_Group(700);
      height: Ant_Group(140);
      padding-top: 90px;
      margin: 0 auto;
    }
    // 支付宝账号登录
    .Alipay {
      //   position: relative;
      width: 360px;
      height: 60px;
      margin-top: Ant_Group(80);
      display: flex;
      justify-content: center;
      align-items: center;
      button {
        color: #fff;
        width: Ant_Group(400);
        height: Ant_Group(70);
        border-radius: Ant_Group(6);
        border-color: #1677ff;
        background: #1677ff;
        .iconfont {
          vertical-align: middle;
          font-size: Ant_Group(35);
          background-color: #1677ff;
          margin-right: Ant_Group(15);
        }
        span {
          vertical-align: middle;
          font-size: Ant_Group(18);
          font-weight: bold;
        }
      }
    }
    // 其他的登录盒子
    .other {
      width: Ant_Group(360);
      margin: 0 auto;
      margin-top: Ant_Group(70);
      .text-center {
        position: relative;
        width: Ant_Group(360);
        height: Ant_Group(22);
        text-align: center;
        margin: 0 auto;
        span {
          display: block;
          color: #ccc;
          text-align: center;
        }
        span::after {
          position: absolute;
          width: Ant_Group(100);
          top: Ant_Group(10);
          content: "";
          display: block;
          border: 0.5px solid #ccc;
        }
        span::before {
          position: absolute;
          margin-right: 140px;
          width: Ant_Group(100);
          margin-left: Ant_Group(260);
          margin-top: Ant_Group(10);
          content: "";
          display: block;
          border: 0.5px solid #ccc;
        }
      }
    //   邮箱登陆
      .Sign_in {
        width: Ant_Group(360);
        color: #fff;
        // margin: 0 auto;
        display: flex;
        justify-content: space-around;
        p {
          margin-top: Ant_Group(40);
          color: rgb(224, 221, 221);
        }
      }
    }

    // 底部
  }

  footer {
    width: 100%;
    height: Ant_Group(253);
    background-color: rgba(28, 37, 51, 1);
    display: flex;
    flex-direction: column;
    color: rgba(255, 255, 255, 0.6);
    font-style: Ant_Group(12);
    font-weight: 300;
    margin-top: Ant_Group(200);
    // 底部地址、咨询、关注模块
    .footer_top {
      display: flex;
      flex: 1;
      justify-content: center;
      align-items: center;
      .footer_top_content {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: Ant_Group(51) 0;
        border-bottom: Ant_Group(1) solid rgba(255, 255, 255, 0.1);
        // 地址
        .footer_top_address {
          @include footerInfo;
        }
        // 咨询
        .footer_top_consult {
          @include footerInfo;
        }
        // 关注
        .footer_top_aboutUs {
          width: Ant_Group(295);
          height: Ant_Group(90);
          h2 {
            font-size: Ant_Group(16);
            color: #fff;
            font-weight: bold;
          }
          // icon图标模块
          .aboutUs_iconGroup {
            position: relative;
            display: flex;
            margin-top: Ant_Group(33);
            .aboutUs_iconItem {
              width: Ant_Group(32);
              margin-right: Ant_Group(18);
            }
            // 图标hover
            .wechat {
              &:hover ~ .wechat_QR_code {
                display: block;
              }
            }
            .weibo {
              &:hover ~ .weibo_QR_code {
                display: block;
              }
            }
            .maimai {
              &:hover ~ .maimai_QR_code {
                display: block;
              }
            }
            // 二维码
            .wechat_QR_code {
              @include QR;
              &::after {
                @include QR_after;
              }
            }
            .weibo_QR_code {
              @include QR;
              left: -9px;
              // display: none;
              &::after {
                @include QR_after;
              }
            }
            .maimai_QR_code {
              @include QR;
              left: 40px;
              &::after {
                @include QR_after;
              }
            }
          }
        }
      }
    }
    // 底部经营许可信息栏
    .footer_bottom {
      width: 100%;
      height: Ant_Group(66);
      display: flex;
      justify-content: center;
      align-items: center;
      p {
        padding: Ant_Group(8);
        position: relative;
        &:nth-child(1)::after {
          @include footer_p_after;
        }
        &:nth-child(2)::after {
          @include footer_p_after;
        }
      }
    }
  }
}
